#応答性の高いチャート

ウィンドウサイズに基づいてチャートサイズを変更する場合、大きな制限はキャンバスのサイズに基づいて変更されることです。与えるサイズ（canvas.widthと.height）できるいいえとは逆に、相対的な値で表現されます。画面サイズ（canvas.style.widthと.height）。さらに、これらのサイズは互いに独立しているため、キャンバス与えるサイズは自動的に調整されません画面サイズが大きくなり、レンダリングが不正確になります。

以下の例動作しない:

<canvas height="40vh" width="80vw">:無効値を指定しても、キャンバスのサイズは変更されません (例 (新しいウィンドウが開きます))
<canvas style="height:40vh; width:80vw">:無効動作すると、キャンバスのサイズは変更されますが、ぼやけてしまいます (例 (新しいウィンドウが開きます))
<canvas style="margin: 0 auto;">:無効動作により、キャンバスは継続的に縮小します。 Chart.js にはキャンバスごとに専用のコンテナが必要で、このスタイルはそこに適用する必要があります。

Chart.js は、いくつかのオプション応答性を有効にし、キャンバスが変更されたことを検出してチャートのサイズ変更動作を制御します。画面サイズの変更と更新与えるそれに応じてサイズを調整します。

#構成オプション

名前空間:options

名前	タイプ	デフォルト	説明
`responsive`	`boolean`	`true`	コンテナーが変更するときにチャートキャンバスのサイズを変更します (重要な注意点...）。
`maintainAspectRatio`	`boolean`	`true`	元のキャンバスの縦横比を維持する`(width / height)`サイズ変更するとき。
`aspectRatio`	`number`	`1`\|`2`	キャンバスのアスペクト比 (つまり、`width / height`、値 1 は正方形のキャンバスを表します)。高さが属性またはスタイルによって明示的に定義されている場合、このオプションは無視されることに注意してください。デフォルト値はグラフの種類によって異なります。放射状チャート (ドーナツ、円、polarArea、レーダー) のデフォルトは`1`そして他の人はデフォルトで`2`。
`onResize`	`function`	`null`	サイズ変更が発生したときに呼び出されます。渡された 2 つの引数、チャートインスタンスと新しいサイズを取得します。
`resizeDelay`	`number`	`0`	サイズ変更の更新を指定されたミリ秒だけ遅らせます。これにより、要素の更新がデバウンスされるため、サイズ変更プロセスが容易になります。

#重要な注意点

キャンバスサイズの変更を検出することは、canvasエレメント。 Chart.js は親コンテナを使用してキャンバスを更新します与えると画面サイズ。ただし、この方法ではコンテナが相対的に位置するとチャートキャンバス専用。コンテナーサイズの相対値を設定することで応答性を実現できます (例 (新しいウィンドウが開きます)):

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

コンテナのサイズを変更することで、プログラムでチャートのサイズを変更することもできます。

chart.canvas.parentNode.style.height = '128px';
chart.canvas.parentNode.style.width = '128px';

上記のコードでチャートの高さのサイズを正しく変更するには、maintainAspectRatioオプションも次のように設定する必要がありますfalse。

#サイズ変更可能なチャートの印刷

CSS メディアクエリを使用すると、ページの印刷時にスタイルを変更できます。これらのメディアクエリから適用される CSS により、グラフのサイズ変更が必要になる場合があります。ただし、サイズ変更は自動的には行われません。印刷時にチャートのサイズ変更をサポートするには、印刷前に (新しいウィンドウが開きます)イベントを実行し、各チャートのサイズ変更を手動でトリガーします。

function beforePrintHandler () {
    for (let id in Chart.instances) {
        Chart.instances[id].resize();
    }
}

また、ブラウザーが印刷用にドキュメントをレイアウトするときやサイズ変更イベントが発生するときの複雑さにより、Chart.js が印刷レイアウトに合わせて適切にサイズ変更できない場合もあります。これを回避するには、明示的なサイズを渡すことができます。.resize()次に、を使用しますアフタープリントについて (新しいウィンドウが開きます)完了時に自動サイズを復元するイベント。

window.addEventListener('beforeprint', () => {
  myChart.resize(600, 600);
});
window.addEventListener('afterprint', () => {
  myChart.resize();
});

←ロケール字幕→